<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 配置管理系统</title>
    <link rel="stylesheet" href="assets/common.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <div class="logo-icon">CM</div>
                    <div class="logo-text">
                        <h1>Config Manager</h1>
                        <p>v2.0</p>
                    </div>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title">主菜单</div>
                    <a href="dashboard.html" class="nav-item">
                        <span class="nav-icon">■</span>
                        <span>控制台</span>
                    </a>
                    <a href="urls.html" class="nav-item">
                        <span class="nav-icon">🌐</span>
                        <span>域名池管理</span>
                    </a>
                    <a href="users.html" class="nav-item active">
                        <span class="nav-icon">👤</span>
                        <span>用户管理</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">系统</div>
                    <a href="#" class="nav-item" onclick="logout(); return false;">
                        <span class="nav-icon">⎋</span>
                        <span>退出登录</span>
                    </a>
                </div>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">A</div>
                    <div class="user-details">
                        <h4 id="userName">Admin</h4>
                        <p id="userRole">管理员</p>
                    </div>
                </div>
            </div>
        </aside>
        
        <!-- 主内容 -->
        <main class="main-content">
            <div class="topbar">
                <div class="topbar-left">
                    <h2>User Management</h2>
                </div>
                <div class="topbar-right">
                    <button class="btn-icon" onclick="loadUsers()" title="刷新">
                        ⟳
                    </button>
                </div>
            </div>
            
            <div class="content-area">
                <!-- 用户列表 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">用户列表</h3>
                        <span class="badge badge-success" id="userCountBadge">Total: 0</span>
                    </div>
                    <div class="card-body" style="padding: 0;">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>姓名</th>
                                    <th>邮箱</th>
                                    <th>角色</th>
                                    <th>状态</th>
                                    <th>最后登录</th>
                                    <th>创建时间</th>
                                </tr>
                            </thead>
                            <tbody id="userTableBody">
                                <tr>
                                    <td colspan="8" style="text-align: center; padding: 40px;">
                                        <span class="loading"></span> 加载中...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 权限说明 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">权限说明</h3>
                    </div>
                    <div class="card-body">
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                            <div style="padding: 20px; background: var(--bg-primary); border: 1px solid var(--border-color);">
                                <h4 style="font-size: 13px; margin-bottom: 10px; color: var(--accent-color);">管理员 (Admin)</h4>
                                <ul style="font-size: 12px; color: var(--text-secondary); line-height: 1.8; margin-left: 20px;">
                                    <li>查看和编辑所有配置</li>
                                    <li>管理用户账户</li>
                                    <li>查看系统日志</li>
                                    <li>完全访问权限</li>
                                </ul>
                            </div>
                            
                            <div style="padding: 20px; background: var(--bg-primary); border: 1px solid var(--border-color);">
                                <h4 style="font-size: 13px; margin-bottom: 10px; color: var(--text-secondary);">普通用户 (User)</h4>
                                <ul style="font-size: 12px; color: var(--text-secondary); line-height: 1.8; margin-left: 20px;">
                                    <li>查看配置信息</li>
                                    <li>查看个人信息</li>
                                    <li>只读访问权限</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <script src="assets/common.js"></script>
    <script>
        // 加载用户列表
        async function loadUsers() {
            try {
                const data = await apiRequest('/api/admin/users');
                if (data && data.errcode === 0) {
                    const users = data.data;
                    
                    // 更新用户数量
                    document.getElementById('userCountBadge').textContent = `Total: ${users.length}`;
                    
                    // 更新表格
                    const tbody = document.getElementById('userTableBody');
                    if (users.length === 0) {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="8" style="text-align: center; padding: 40px; color: var(--text-secondary);">
                                    暂无用户数据
                                </td>
                            </tr>
                        `;
                    } else {
                        tbody.innerHTML = users.map(user => `
                            <tr>
                                <td>${user.id}</td>
                                <td style="font-family: 'Courier New', monospace;">${user.username}</td>
                                <td>${user.name || '-'}</td>
                                <td style="font-family: 'Courier New', monospace; font-size: 12px;">${user.email || '-'}</td>
                                <td>
                                    <span class="badge ${user.role === 'admin' ? 'badge-success' : 'badge-warning'}">
                                        ${user.role === 'admin' ? 'ADMIN' : 'USER'}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge ${user.status === 'active' ? 'badge-success' : 'badge-error'}">
                                        ${user.status === 'active' ? 'ACTIVE' : 'INACTIVE'}
                                    </span>
                                </td>
                                <td style="font-size: 12px;">${formatDate(user.lastLogin)}</td>
                                <td style="font-size: 12px;">${formatDate(user.createdAt)}</td>
                            </tr>
                        `).join('');
                    }
                }
            } catch (error) {
                console.error('加载用户列表失败:', error);
                showMessage('加载用户列表失败', 'error');
            }
        }
        
        // 页面加载时执行
        window.addEventListener('load', () => {
            loadUsers();
        });
    </script>
</body>
</html>

